<template>
    <footer class="bottom">
        <div class="bottom-content">
            <nav>
                <a href="">
                    <h3>企业服务</h3>
                </a>
                <a href="">
                    <h3>关于我们</h3>
                </a>
                <a href="">
                    <h3>联系我们</h3>
                </a>
                <a href="">
                    <h3>帮助中心</h3>
                </a>
                <a href="">
                    <h3>意见反馈</h3>
                </a>
            </nav>
            <div class="protect">©2020 codelover.club 版权所有 <a
                    href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备20072498号-1</a></div>
        </div>
    </footer>
</template>

<script setup lang="ts">

</script>

<style scoped>
.bottom {
    background-color: #849dff;
    position: fixed;
    /* 固定位置 */
    bottom: 0;
    /* 底部对齐 */
    left: 0;
    /* 左侧对齐 */
    right: 0;
    /* 右侧对齐 */
    width: 100%;
    /* 宽度为100% */
    margin-bottom: 0;
    /* 底部边距为0 */
    height: 50px;

}



.bottom-content {
 
    position: absolute;
    display: flex;
    justify-content: space-around;
    /* 均等分布空间 */
    align-items: center;
    /* 垂直居中 */
    height: 100%;
    /* 使.bottom-content的高度与.bottom的高度一致 */
    width: 100%;
}

/* 清除列表默认样式 */
nav>a {
    display: inline-block;
    /* 使a标签表现为块级元素，以便设置宽度和高度 */
    margin: 0;
    padding: 0;
    width: auto;
    /* 根据需要设置宽度 */
    height: 100%;
    /* 使a标签的高度与.bottom-content的高度一致 */
    text-decoration: none;
    /* 去除下划线 */
    color: #fff;
    /* 文字颜色 */
}

/* 如果需要，可以给每个a标签内的h3设置样式 */
nav>a>h3 {
    margin: 0;
    /* 去除默认的外边距 */
    padding: 0 10px;
    /* 内边距可以根据需要调整 */
}

.protect {
    color: #fff;

}

/* 修改 a 标签的样式 */
.protect>a {
    text-decoration: none;
   
    color: #fff;
 
}
</style>